{extend name="common@base/common" /}

{block name="style"}
<link href="__CSS__/main.min.css" rel="stylesheet" type="text/css"/>
{/block}

{block name="body"}
<div id="main-container" class="container">
    <ol class="breadcrumb">
      <li><a href="{:url('index')}">演示首页</a></li>
      <li><a href="{:url('editor')}">表单演示</a></li>
    </ol>

    <section class="demo-section">
        <h1>表单演示</h1>
        <form action="#" method="post">
            
            <!-- 文本框 -->
            <h3>文本框</h3>
            <div class="example">
                <div class="form-group">
                    <input id="title" name="title" class="form-control form_check" check-type="Text" value="{$data.title}" placeholder="文章标题" required="">
                </div>

                <div class="form-group">
                    <label for="exampleInputMoney1">捐赠金额</label>
                    <div class="input-group">
                      <span class="input-group-addon">￥</span>
                      <input type="number" class="form-control" id="exampleInputMoney1" placeholder="最低捐赠金额为 ￥10.00">
                      <span class="input-group-addon">.00</span>
                    </div>
                </div>
                <div class="form-group has-success">
                    <label for="inputSuccess1">输入框（success）</label>
                    <input type="text" class="form-control" id="inputSuccess1">
                    <div class="help-block">这是帮助性提示文本。</div>
                </div>
                <div class="form-group has-warning">
                    <label for="inputWarning1">输入框（warning）</label>
                    <input type="text" class="form-control" id="inputWarning1">
                </div>
                <div class="form-group has-error">
                    <label for="inputError1">输入框（error）</label>
                    <input type="text" class="form-control" id="inputError1">
                </div>

                <div class="form-group">
                    <label for="exampleDisabledInput">被禁用的输入框</label>
                    <input type="text" class="form-control" id="exampleDisabledInput" placeholder="被禁用的输入框" disabled>
                </div>

                <div class="checkbox has-success">
                    <label>
                        <input type="checkbox" id="checkboxSuccess" value="option1">多选框（success）
                    </label>
                </div>
                <div class="checkbox has-warning">
                    <label>
                        <input type="checkbox" id="checkboxWarning" value="option1">多选框（warning）
                    </label>
                </div>
                <div class="checkbox has-error">
                    <label>
                    <input type="checkbox" id="checkboxError" value="option1">多选框（error）
                    </label>
                </div>
            </div>

            <!-- 静态文本框 -->
            <h3>静态文本</h3>
            <div class="example clearfix">
                <div class="form-group">
                    <label class="col-sm-2">用户名</label>
                    <div class="col-sm-10">
                      <p class="form-control-static">me@example.com</p>
                    </div>
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword5" class="col-sm-2">密码</label>
                    <div class="col-sm-10">
                      <input type="password" class="form-control" id="exampleInputPassword5" placeholder="密码">
                    </div>
                </div>
            </div>

            <!-- 下拉框 -->
            <h3>下拉框</h3>
            <div class="example">
                <div class="form-group">
                    <select id="" name="category" class="form-control">
                        {volist name="data.category" id="top"}
                            <option value="{$top.id}" {eq name="data['category']" value="$top['id']"} selected{/eq}>
                            {$top.title}
                            </option>
                        {/volist}
                    </select>
                </div>
            </div>

            <!-- Chosen -->
            <h3>Chosen</h3>
            <div class="example">
                <div class="form-group">
                    <link href="__ZUI__/lib/chosen/chosen.min.css" rel="stylesheet">
                    <script src="__ZUI__/lib/chosen/chosen.min.js"></script>
                    <div class="">
                        <select data-placeholder="选择一些爱吃的水果..." class="chosen-select form-control" tabindex="2" multiple="">
                            <option value="strawberries">草莓</option>
                            <option value="apple">苹果</option>
                            <option value="orange">橙子</option>
                            <option value="cherry">樱桃</option>
                            <option value="banana">香蕉</option>
                            <option value="figs">无花果</option>
                        </select>
                    </div>
                    <script>
                        $(function(){
                            $('select.chosen-select').chosen({
                                no_results_text: '没有找到',    // 当检索时没有找到匹配项时显示的提示文本
                                disable_search_threshold: 10, // 10 个以下的选择项则不显示检索框
                                search_contains: true         // 从任意位置开始检索
                            });
                        })
                    </script>
                </div>
            </div>

            <!-- 加载编辑器的容器 -->
            <h3>编辑器</h3>
            <div class="example">
                <div class="form-group">
                    <div class="">
                        {:widget('common/Ueditor/editor',['myeditor_edit','content',$data['content'],'','height:auto;min-height:400px'])}
                    </div>
                </div>
            </div>

            <!-- 单选框 -->
            <h3>多选和单选框</h3>
            <div class="example">
                <div class="checkbox">
                  <label>
                    <input type="checkbox"> 我已阅读并接受用户协议
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="exampleRadioOption1"> 使用默认选项
                  </label>
                </div>
                <div class="radio">
                  <label>
                    <input type="radio" name="exampleRadioOption1"> 让我自定义选项
                  </label>
                </div>
            </div>

            <button type="submit" class="btn btn-success">提 交</button>
        </form>
    </section>
</div>
{/block}

{block name="script"}

{/block}